import React  from "react";
import ReactDOM  from "react-dom/client";

let root = ReactDOM.createRoot(document.getElementById('root'))


// 条件渲染   根据是否满足条件，显示响应的html解构
// 场景：isloding效果   登录认证
// 语法：
// 1、三元表达式  
// 2、函数调用
// 3、短路与  &&  逻辑中断
let score = 90
let fn1 = ()=>{
    if(score > 80){
        return <div>您的成绩合格</div>
    }
    else{
        return <div>您的成绩不合格</div>
    }
}
let islogin = false
let isloding = true
let pp = (
    <div>
        <h1>jsx中条件渲染</h1>
        {islogin?<div>尊敬的admin用户，欢迎您</div>:<div>您还没有登录，请登录</div>}
        {isloding?<div>正在加载中，请耐心等待</div>:<div>加载完成，显示响应的内容</div>}
        {fn1()}
        <hr></hr>
        {islogin && <div>尊敬的admin用户，欢迎您</div>}
    </div>
)



root.render(pp)